<script setup lang="ts">
import DefaultType from '~/assets/imgs/default_type.png';
import { GameVendorsLoading } from '~/composables/useGameLoading';
import { allGamesPopup } from '~/layouts/default/aside-menu/AllGames.vue';

const bp = useAppBreakpoints();
const [inviteGameQry] = useFilterInfiniteQuery(apis.apiGameProviderList, {
  page_size: {
    value: bp.ltTabletl ? 15 : 54,
  },
});
const router = useRouter();
const appStore = useAppStore();
function toDetail(item: any) {
  if (item.provider_code === 'ap') {
    allGamesPopup.open({ games: item.game }, { title: 'Sports' });
    return;
  }
  router.push({ name: RN.GAMELISTPROVIDER, params: { providerCode: item.provider_code, providerName: item.name } });
}
</script>

<template>
  <div class="page-content-w flex flex-col select-none gap-5">
    <div class="flex-between">
      <div class="flex items-center gap-2">
        <i class="i-local:handle mr-2 w-4" />
        <span>{{ $t('u4Pa9w4tsyO6UpwFtOuVe') }}</span>
      </div>
    </div>
    <div class="list">
      <div class="infinite grid">
        <TInfiniteQuery class="col-span-full mt-3" :querier="inviteGameQry">
          <template #default="{ item }">
            <div class="h-60px w-full flex-center rounded-lg bg-sys-layer-d lt-tabletl:h-50px *:hover:scale-110" @click="toDetail(i)">
              <img class="max-w-105px object-cover lt-tabletl:w-80.5px" :src="!!item.image_cover ? appStore.joinCdnPath(item.image_cover) : DefaultType">
            </div>
          </template>
          <template #initLoading>
            <GameVendorsLoading />
          </template>
        </TInfiniteQuery>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.infinite {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 12px;
  @media bp-lt-tabletl {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  }
}
.more {
  --uno: 'rounded-8px bg-sys-layer-d w-120px flex-center px-42px pt-8px pb-12px text-sys-text-body ';

  box-shadow: 0 -4px 0 0 rgb(0 0 0 / 50%) inset;
}

.introduce {
  .item {
    --uno: ' text-16px relative overflow-hidden';

    &.close {
      height: 300px;
      padding-bottom: 50px;

      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100px;
        content: '';
        background: linear-gradient(to top, theme('colors.sys.layer.b') 40%, transparent);
      }
    }

    .title {
      --uno: 'text-4 text-sys-text mb-12px font-semibold';
    }

    .content {
      --uno: 'text-left text-sys-text-body relative overflow-hidden text-sm';
    }

    .show-more {
      --uno: 'text-left text-#EAB308 font-semibold absolute bottom-0px z-2';
    }
  }
}
</style>
